<template>
  <div class="component-log-item">
    <span :class="['log-level', log.level]">[{{ log.level }}]</span>
    &nbsp;
    <span :class="['timer', { last: idx === 0 }]">{{ log.ts }}</span>
    <pre class="log-msg"><code>{{ log.msg }}</code></pre>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'LogItem',
  props: {
    log: {
      type: Object,
      required: true
    },
    idx: Number
  }
})
</script>

<style lang="scss" scoped>
.component-log-item {
  // transition: all 100ms;
  padding: 4px 0;
  margin: 0;
  color: #999;
  .timer {
    color: #333;
  }
  .log-msg {
    margin: 4px 0 0;
    code {
      font-size: 14px;
      color: #777;
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
        'Lucida Sans', Arial, sans-serif;
    }
  }
  .log-level {
    font-weight: bold;
    color: #333;
    &.INFO {
      color: #30b08f;
    }
    &.WARN {
      color: #fec171;
    }
    &.ERROR {
      color: #c03639;
    }
    &.DEBUG {
      color: #555;
    }
  }
  ::v-deep .el-card__body {
    box-sizing: border-box;
    padding: 10px;
    p {
      margin: 0;
      font-size: 14px;
      line-height: 1.5;
    }
  }
}
</style>
